<script>
export default {
  name: "keShang",
  data(){
    return{
      carlist:[
        {
          id:1,
          name:'车1'
        },
        {
          id:2,
          name: '车2'
        },
        {
          id:3,
          name: '车3'
        },
        {
          id:4,
          name: '车4'
        },


      ],
      carid:"",
      carname:"",
    }
  },
  methods:{
    add(){
      console.log(this.carname)
      console.log(this.carid)
      let obj={
        id:this.carid,
        name:this.carname,
      }
      if(this.carid===''){
        alert('输入框不能为空')
      }else{
        this.carlist.push(obj)
      }
      // this.carlist.push(obj)
    },
    deLete(numindex){
      this.carlist.splice(numindex, 1);
    }
  }
}
</script>

<template>
<div id="app">
  <div class="head">头部</div>
    <label for="email">id:</label>
    <input type="text" class="form-control" id="email" v-model="carid">
    <label for="pwd">name:</label>
    <input type="text" class="form-control" id="pwd" v-model="carname">

<!--      <label class="form-check-label">-->
<!--        <input class="form-check-input" type="checkbox"> Remember me-->
<!--      </label>-->
    <button type="submit" class="btn btn-primary" @click="add">添加</button>

  <div class="psbig1" v-for="(item,index) in carlist" :key="1-index">
    <button>{{item.id}}</button>
    <button>{{item.name}}</button>
    <button @click="deLete(index)">删除</button>
  </div>
</div>
</template>

<style scoped lang="less">
.head{
  width: 100%;
  height: 50px;
  background: #979494;
  text-align: center;
  line-height: 50px;
}
</style>